/**
 * Created by zhangsong on 2019-05-08.
 */

import React, { Component } from 'react';
import { Button, Form, Input, Select, Spin } from 'antd';
import { formatMessage, FormattedMessage } from '@/utils/i18n';
import { connect } from 'dva';
import StaffReducer from '@/dva/application/staff';
import UserReducer from '@/dva/user';
import Style from './search.module.scss';

const formStyle = {
  formItem: {
    // labelCol: {
    //   span: 3,
    // },
  },
};

const { Namespace, Effects } = StaffReducer;

@connect(
  state => ({
    staffStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    handleSearchSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.listByParam}`,
        data,
      }),
  }),
)
@Form.create()
class SearchApp extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { handleSearchSubmit, staffStore } = this.props;
        const { zoneSpecified = [], ...other } = values;
        const query = {
          ...other,
        };
        if (Array.isArray(zoneSpecified) && zoneSpecified.length > 0) {
          query.zoneSpecified = zoneSpecified.join('|');
        }
        handleSearchSubmit({
          query,
          page: 1,
          pageSize: staffStore.pageSize,
        });
      }
    });
  };

  handleReset = () => {
    const { form } = this.props;
    form.setFieldsValue({
      surname: undefined,
      idCardNo: undefined,
      staffNo: undefined,
      position: undefined,
      division: undefined,
      department: undefined,
      zoneSpecified: undefined,
      status: undefined,
      is_expire: undefined,
      pass_no: undefined,
    });
  };

  onDownload = () => {
    this.props.onDownload();
  };

  render() {
    const { form, userStore, exloading } = this.props;
    const { area } = userStore;
    const { getFieldDecorator } = form;
    // const zoneTips = Array.isArray(area) ? (
    //   <div className={Style.zoneTipsWrapper}>
    //     {area.map(item => (
    //       <div
    //         key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
    //         className={Style.zoneTipsRow}
    //       >
    //         <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
    //         <div>=</div>
    //         <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
    //       </div>
    //     ))}
    //   </div>
    // ) : null;
    return (
      <div className={Style.searchFormWrapper}>
        <div style={{ display: 'flex', justifyContent: 'end', padding: '0 0 10px' }}>
          <Button loading={exloading} htmlType="button" icon="download" onClick={() => this.onDownload()}>
            {formatMessage('button.newdownload')}
          </Button>
        </div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.surname.name')}
            >
              {getFieldDecorator('surname', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.idCardNo.name')}
            >
              {getFieldDecorator('idCardNo', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.staffNo.name')}
            >
              {getFieldDecorator('staffNo', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.position.name')}
            >
              {getFieldDecorator('position', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.division.name')}
            >
              {getFieldDecorator('division', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.department.name')}
            >
              {getFieldDecorator('department', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.zoneSpecified.name')}
            >
              {area == null ? (
                <Spin spinning />
              ) : (
                getFieldDecorator('zoneSpecified', {})(
                  <Select
                    showSearch
                    allowClear
                    mode="multiple"
                    style={{ width: '100%' }}
                    optionFilterProp="children"
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    loading={area === null}
                    placeholder={formatMessage('baseInfo.placeholderChecked')}
                  >
                    {Array.isArray(area)
                      ? area.map(item => (
                        <Select.Option key={item.id} value={item.areaCode}>
                          {item.areaCode}
                        </Select.Option>
                      ))
                      : null}
                  </Select>,
                )
              )}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('baseInfo.approvalStatusName')}>
              {getFieldDecorator('status', {})(
                <Select allowClear>
                  <Select.Option value={0}>
                    <FormattedMessage id="baseInfo.needApprovalStatus" />
                  </Select.Option>
                  <Select.Option value={1}>
                    <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                  </Select.Option>
                  <Select.Option value={-1}>
                    <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                  </Select.Option>
                  <Select.Option value={3}>
                    <FormattedMessage id="applicationContractor.temporary.cancelled" />
                  </Select.Option>
                </Select>,
              )}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('applicationCommon.readerCard.canceltakes')}>
              {getFieldDecorator('is_expire', {
                initialValue: 0,
              })(
                <Select allowClear placeholder={formatMessage('baseInfo.placeholderChecked')}>
                  <Select.Option value={0}>
                    <FormattedMessage id="baseInfo.all" />
                  </Select.Option>
                  <Select.Option value={1}>
                    <FormattedMessage id="applicationCommon.readerCard.noexpired" />
                  </Select.Option>
                  <Select.Option value={2}>
                    <FormattedMessage id="applicationCommon.readerCard.expired" />
                  </Select.Option>
                </Select>,
              )}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationCommon.readerCard.passno')}
            >
              {getFieldDecorator('pass_no', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            {/* <Form.Item
              {...formStyle.formItem}
              label={formatMessage('applicationStaff.columns.surname.name')}
            >
              {getFieldDecorator('surname', {})(<Input />)}
            </Form.Item> */}
          </div>
          <div className="item-wrapper search-button">
            <Button htmlType="button" onClick={this.handleReset}>
              {formatMessage('button.clear')}
            </Button>
            <Button type="primary" htmlType="submit">
              {formatMessage('button.search')}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default SearchApp;
